<template>
  <el-card class="container-card">
    <div>
      <el-card class="actionBar" style="margin-bottom: 15px">
        <el-row>
          <el-col :span="3" style="margin: 5px">
            <el-select
              v-model="talentData.education"
              filterable
              clearable
              placeholder="学历要求"
            >
              <el-option
                v-for="item in educationOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3" style="margin: 5px">
            <el-select
              v-model="talentData.experience"
              filterable
              clearable
              placeholder="工作经验"
            >
              <el-option
                v-for="item in experienceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3" style="margin: 5px">
            <el-select
              v-model="talentData.updateTime"
              filterable
              clearable
              placeholder="更新时间"
            >
              <el-option
                v-for="item in updateTimeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="14" style="margin: 5px">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
            >
              <el-select
                v-model="select"
                slot="prepend"
                placeholder="请选择"
                style="width: 100px"
                clearable
              >
                <el-option label="姓名" value="1"></el-option>
                <el-option label="职位" value="2"></el-option>
                <el-option label="地区" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-card>

      <el-card>
        <el-table
          :data="talentData"
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="头像">
            <el-avatar shape="square" :src="url"></el-avatar>
          </el-table-column>
          <el-table-column label="姓名" prop="name"> </el-table-column>
          <el-table-column label="期望职位" prop="position"> </el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="学历" prop="education"> </el-table-column>
          <el-table-column label="工作经验" prop="experience"></el-table-column>
          <el-table-column label="求职地区" prop="area"></el-table-column>
          <el-table-column label="更新时间" prop="updateTime" width="200">
          </el-table-column>
          <el-table-column label="操作">
            <el-button size="small" @click="toResumDetails">
              简历详情
            </el-button>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-card>
</template>

<script>
import { educationOption, experienceOption, updateTimeOption } from "./enum.js";
export default {
  data() {
    return {
      educationOption,
      experienceOption,
      updateTimeOption,
      input3: "",
      select: "",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

      talentData: [
        {
          name: "张旦流",
          position: "马六甲海盗",
          gender: "男",
          age: "20",
          education: "本科",
          experience: "应届生",
          area: "菲律宾",
          updateTime: "2021年12月19日",
        },
        {
          name: "张恒疏",
          position: "太空人",
          gender: "男",
          age: "22",
          education: "本科",
          experience: "应届生",
          area: "浙江丽水",
          updateTime: "2021年12月20日",
        },
      ],
    };
  },
  methods: {
    toResumDetails() {
      this.$router.push("/resume/resumeDetails");
    },
  },
};
</script>

<style scoped>
.container-card {
  margin: 13px;
  height: 100%;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>